<template>
  <view class="home-main">
    <hx-navbar ref="hxnb" :config="config" @clickBtn="onClickBtn" />
    <view class="cont">
      <view class="top">
        <u--form labelPosition="left" :model="searchForm" :rules="searchFormRules" ref="searchForm" labelWidth="140" style="padding-bottom: 16rpx">
           <u-form-item label="身份证号:" prop="studentIdcard" borderBottom>
            <u--input v-model="searchForm.studentIdcard" border="none"></u--input>
          </u-form-item>
        </u--form>
        <u-button @click="submit" color="linear-gradient(to right, #00b99e, #00e5c3)" shape="circle" text="查询" ></u-button>
      </view>
      <view class="bottom">
        <!-- 学生信息 -->
        <view class="inner">
          <view class="line">
            <view class="line-left">序号：</view>
            <view class="line-right">
              {{ anonymousNumber || '暂无'}}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import hccmConfig from "@/common/hccm-config.js"
import mRequest from "@/api/index";
export default {
  data() {
    return {
      config: {
        title: "获取快速考试序号",
        color: "#ffffff",
        back: false,
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#00b99e", "#25bba4", "#00e5c3", "#06eeca"]],
        // 滑动屏幕后切换颜色，注意颜色为数组时长度必须一样，还有使用滑动切换必须监听 onPageScroll 事件
        slideBackgroundColor: [0, ["#a9a1ff", "#6970ff", "#ff55ff", "#ff9999"]],
        // 状态栏 ，数组则为滑动变色
        statusBarBackground: ["", "#ffffff"],
        rightButton: [
          // {
          //   key: 'btn1',
          //   icon: '&#xe651;',
          //   position: 'left'
          // },
          // {
          //     key: 'btn2',
          //     icon: '&#xe64c;',
          //     position: 'left'
          // },
          // {
          //   key: "btn3",
          //   icon: "&#xe6eb;",
          //   position: "left"
          // }
        ]
      },
      searchFormRules: {
        studentIdcard: {
					type: 'string',
					required: true,
					message: '请填写身份证号',
					trigger: ['blur', 'change']
				},
      },
      searchForm:{
        recordsName: '',
        recordsId: '',
        studentIdcard: ''
      },
      anonymousNumber: '',
      studentInfo: {},
      recordsId: '',
    };
  },
  onLoad(options){
    this.recordsId = options.recordsId
  },
  onPageScroll(e) {
    // 重点，用到滑动切换必须加上
    // this.$refs.hxnb.pageScroll(e);
  },
  methods: {
    // 提交 查询
    submit(){
      let params = {
        recordsId: this.recordsId,
        studentIdcard: this.searchForm.studentIdcard
      }
      this.anonymousNumber = ''
      mRequest.getOrder(params).then(res=>{
        if(res.code === 0){
          this.anonymousNumber = res.anonymousNumber
        }else{
          this.anonymousNumber = ''
        }
      })
    },
    onClickBtn(data) {
      //console.log(data);
      uni.showToast({
        title: `key为 ${data.key} 的按钮`,
        icon: "none",
        duration: 1300
      });
    },
  }
};
</script>
<style lang='scss'>
.home-main {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  .cont {
    .top {
      margin: 20rpx;
      background: #00b99e10;
      padding: 20rpx;
      border-radius: 8rpx;
    }
    .bottom{
      margin: 20rpx;
      background: #00b99e10;
      padding: 20rpx;
      border-radius: 8rpx;
      .title{
        padding-bottom: 10rpx;
        font-weight: 600;
        color: #333;
        font-size: 32rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .inner{
        border: 1px solid #00b99e80;
        border-radius: 10rpx;
        .line{
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 30rpx;
          font-weight: 400;
          .line-left{
            width: 180rpx;
            min-height: 100rpx;
            color: #333;
            border-bottom: 1px solid #00b99e80;
            display: flex;
            justify-content: flex-end;
            align-items: center;
          }
          .line-right{
            flex: 1;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            min-height: 100rpx;
            padding: 0 10rpx;
            border-left: 1px solid #00b99e80;
            border-bottom: 1px solid #00b99e80;
            .qr{
              height: 300rpx;
              width: 300rpx;
            }
          }
        }
        .line:last-of-type{
          .line-left{
            border-bottom: none;
            height: 200rpx;
            font-size: 18px;
          }
          .line-right{
            border-bottom: none;
            height: 200rpx;
            font-size: 30px;
            font-weight: 600;
            color: #00b99e;
            display: flex;
            align-content: center;
            justify-content: center;
          }
        }
      }
      .down{
        width: 100%;
        padding: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .u-text{
          justify-content: center !important;
        }
      }
    }
  }
}
</style>